<template>
  <yd-layout class = "assemble">
    <v-header slot="navbar" title="拼团专区">
      <router-link to="/" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </router-link>
    </v-header>
    <yd-tab v-model = "activeIndex">
      <yd-tab-panel :label="item" v-for = "(item, index) in tabLi" :key = "index" class = "assemble_con">
        <yd-slider autoplay="3000">
          <yd-slider-item v-for="item in sliderLi" :key="item.id">
            <a :href="item.link">
              <box :bgImg='item.imgSrc' prop="118:413"></box>
            </a>
          </yd-slider-item>
        </yd-slider>
        <div class="comm">
          <div class="flex middle comm_li" v-for = "(item, index) in commLi" :key = "`0${index}`">
            <box :bgImg = "item.imgSrc" class = "comm_logo"></box>
            <div class="comm_con">
              <p class = "title"><span>{{ item.source }}</span> <span>{{ item.commName }}</span><span>{{ item.capacity }}</span><span>{{ item.weight }}</span></p>
              <p class = 'desc'>兑换：<span>{{ item.integral + item.price }}</span></p>
              <p>市场价： <span>{{ item.originalPrice }}</span></p>
            </div>
            <div class="text-right comm_time">
              <p class = "time primary">{{ item.participants }}</p>
              <yd-button type="primary">去抢购</yd-button>
            </div>
          </div>
        </div>
      </yd-tab-panel>
    </yd-tab>
  </yd-layout>
</template>
<script>
export default {
  name: 'assemble',
  data () {
    return {
      activeIndex: 0,
      tabLi: [],
      sliderLi: [],
      commLi: []
    }
  },
  created () {
    this.init()
  },
  watch: {
    activeIndex: {
      immediate: true,
      handler (val) {
        this.init(val)
      }
    }
  },
  methods: {
    init () {
      this.tabLi = ['全部', '分类1', '分类2']
      this.sliderLi = [{
        id: '0',
        link: 'http://www.ydcss.com',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
      }, {
        id: '1',
        link: 'http://www.ydcss.com',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
      }, {
        id: '2',
        link: 'http://www.ydcss.com',
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg'
      }]
      this.commLi = [{
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '旬邑苹果',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '￥66.90',
        originalPrice: '96.90',
        participants: 'xxx人团'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '旬邑苹果',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '66.90',
        originalPrice: '96.90',
        participants: 'xxx人团'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '旬邑苹果',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '66.90',
        originalPrice: '96.90',
        participants: 'xxx人团'
      }, {
        imgSrc: 'http://img1.shikee.com/try/2016/06/19/09430120929215230041.jpg_220x220.jpg',
        source: '北四县自产',
        commName: '旬邑苹果',
        capacity: '80-85mm12枚',
        weight: '约6斤',
        integral: '1000积分',
        price: '66.90',
        originalPrice: '96.90',
        participants: 'xxx人团'
      }]
    }
  }
}
</script>
<style lang="scss" scoped>
.assemble_con{
  padding: $padding;
  box-sizing: border-box;
  .comm_li{
    margin: .1rem 0;
    padding: .1rem;
    background-color: #eee;
    .comm_logo{
      width: 1.44rem;
    }
    .comm_con{
      padding-left:$large-padding;
      box-sizing: border-box;
      flex: 3;
      .title{
        span{
          margin-right: .1rem;
        }
      }
      .desc{
        margin: .1rem 0;
      }
    }
    .comm_time{
      flex: 2;
      box-sizing: border-box;
      .time{
        margin-bottom: .5rem;
      }
    }
  }
}
</style>
